<script setup lang="ts">
import useMenuOptions from './useMenuOptions'
import useCollapsed from './useCollapsed'
import useActiveMenu from './useActiveMenu'

const { menuOptions } = useMenuOptions()
const { isCollapsedSidebar } = useCollapsed()
const { activeMenu } = useActiveMenu()
</script>

<template>
	<n-layout-sider
		_flex="1"
		_transition="all duration-300"
		_shadow="n-box-shadow-1"
		_bg="n-card-color"
		_border="n-divider-color r t"
		bordered
		collapse-mode="width"
		:collapsed-width="64"
		:width="240"
		:collapsed="isCollapsedSidebar"
		show-trigger
		@collapse="isCollapsedSidebar = true"
		@expand="isCollapsedSidebar = false"
	>
		<n-menu
			accordion
			:value="activeMenu"
			:collapsed="isCollapsedSidebar"
			:collapsed-width="64"
			:collapsed-icon-size="22"
			:options="menuOptions"
			show-trigger
			:on-update:value="(path: string) => $router.push(path)"
		/>
	</n-layout-sider>
</template>
